import React, {PropTypes, Component} from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import {observer, inject} from 'mobx-react';

import Store from '../store';
import '../index.scss';

import HeaderStore from '../../../components/menuHeader/store';
import WorkList from '../../../components/workList/WorksList';

import Slider from '../../../components/ui/slider/index';

import BianjiTuijianCmp from './bjtj';
import DingyueTuijianCmp from './dytj';
import HuodongTuijianCmp from './hdtj';



const _windowResizeFn = function (evt) {
    // let me = this;
    // let defaultWidth = $(window).width() / 3;
    // let imgLength = CurStore.imgData.length;
    //
    // this.defaultLeft = 0 - (imgLength * defaultWidth)  + this.curIndex * (0 - defaultWidth);
    //
    // $(me.refs.group).css({
    //     marginLeft: me.defaultLeft
    // });
    this.setState({
        time : new Date().getTime()
    });
};

class TopHead extends Component {
    constructor(props) {
        super(props);
        this.state = {
            time : new Date().getTime(),
            data : []
        };
    }

    componentDidMount() {
        this._windowResize = _windowResizeFn.bind(this);
        $(window).bind("resize", this._windowResize);

        this._loadData();
    }
    _loadData (){
        $.ajax({
            dataType: 'jsonp',
            context: this,
            url: '//node.zenchina.org/advertise/getList',
            data: {
                page: 1,
                size: 20,
                m: 'main_lunbo'
            },
            success: function (res) {
               if(res.status == 200){
                   // res.data.shift();
                   this.setState({
                       time : new Date().getTime(),
                       data : res.data
                   });
               }
            }
        });
    }
    render() {
        return (
            <div className="__topHead" key={this.state.time}>
                <Slider {...{
                    trackType : 'vcg_sylb',
                    data : this.state.data
                    // interval : 1500
                    // auto: false
                }}/>
            </div>
        );
    }
}

@observer
export default class Maincmp extends Component {
    state = {}

    componentDidMount() {
        HeaderStore.changeActive('首页');
    }

    render() {
        return (
            <div className="vcg_home_main">
                <TopHead />
                <BianjiTuijianCmp/>
                <DingyueTuijianCmp/>
                <HuodongTuijianCmp/>
            </div>
        );
    }
}

Maincmp.propTypes = {
};
